﻿<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="assets/lib/html5shiv.js"></script>
	<script type="text/javascript" src="assets/lib/respond.min.js"></script>
	<![endif]-->
    <link rel="stylesheet" href="assets/boostrap/bootstrap.min.css">
    <link rel="stylesheet" href="assets/boostrap/bootstrap-table.min.css">
    <link rel="stylesheet" href="assets/zTree/zTreeStyle.css" type="text/css">
	<link rel="stylesheet" type="text/css" href="assets/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="assets/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="assets/lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="assets/skin/green/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="assets/css/systemBuild.css" />
	<title>指标体系设计软件</title>
</head>
<body class="big-page">
<header class="navbar-wrapper">
	<div class="navbar navbar-fixed-top">
		<div class="container-fluid cl">
            <img src="assets/images/admin-login-bg.jpg" class='imgLogo' alt="logo图">
            <a class="logo navbar-logo f-l mr-10 hidden-xs" href="#javascript:;">指标体系设计软件</a>
			<nav class="nav navbar-nav">
				<ul class="cl">
                    <li><a href="index.html"><i class="Hui-iconfont Hui-iconfont-home"></i> 首页</a></li>
					<li><a href="normList.html"><i class="Hui-iconfont Hui-iconfont-manage2"></i> 评估指标模块</a></li>
                    <li><a href="systemList.html"class="active"><i class="Hui-iconfont Hui-iconfont-fenlei"></i> 评估体系模块</a>
                    </li>
                    <li><a href="versionList.html"><i class="Hui-iconfont Hui-iconfont-middle"></i> 体系版本模块</a></li>
				</ul>
			</nav>
			<nav id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">
				<ul class="cl">
					<li>超级管理员</li>
					<li class="dropDown dropDown_hover">
						<a href="#" class="dropDown_A">admin <i class="Hui-iconfont">&#xe6d5;</i></a>
						<ul class="dropDown-menu menu radius box-shadow">
							<li><a href="javascript:;" onClick="myselfinfo()">个人信息</a></li>
							<li><a href="#">切换账户</a></li>
							<li><a href="#">退出</a></li>
						</ul>
					</li>
					<li id="Hui-msg"> <a href="#" title="消息"><span class="badge badge-danger">1</span><i class="Hui-iconfont" style="font-size:18px">&#xe68a;</i></a> </li>
					<li id="Hui-skin" class="dropDown right dropDown_hover"> <a href="javascript:;" class="dropDown_A" title="换肤"><i class="Hui-iconfont" style="font-size:18px">&#xe62a;</i></a>
						<ul class="dropDown-menu menu radius box-shadow">
							<li><a href="javascript:;" data-val="default" title="默认（黑色）">默认（黑色）</a></li>
							<li><a href="javascript:;" data-val="blue" title="蓝色">蓝色</a></li>
							<li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
							<li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
							<li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
							<li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
						</ul>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</header>
<!--左侧-->
<aside class="Hui-aside">
    <ul>
        <li class="active">
            <a href="systemBuild.html"><i class="Hui-iconfont Hui-iconfont-add"></i></a>
        </li>
        <li>
            <a href="javascript:;"><i class="Hui-iconfont Hui-iconfont-del2"></i></a>
        </li>
        <li>
            <a href="javascript:;"><i class="Hui-iconfont Hui-iconfont-edit2"></i></a>
        </li>
        <li>
            <a href="systemList.html"><i class="Hui-iconfont Hui-iconfont-yuedu"></i></a>
        </li>
        <li class="detialBox">
            <a href="#javascript:;" title="详情"><i class="Hui-iconfont Hui-iconfont-youhuiquan"></i></a>
        </li>
    </ul>
</aside>
<!--主体-->
<section class="Hui-article-box">
	<div class="container" id="baseNews">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <form action="" method="post" class="form form-horizontal" id="form-member-add" novalidate="novalidate">
                <div class="content">
                    <div class="row cl">
                        <label class="form-label col-xs-12 col-sm-12 col-md-2 col-lg-2"><span class="c-red">*</span>体系名称：</label>
                        <div class="formControls col-xs-12 col-sm-12 col-md-8 col-lg-8">
                            <input type="text" class="input-text valid" value="" placeholder="" id="systemName" name="systemName" aria-required="true" aria-invalid="false">
                            <label id="systemName-error" class="error valid" for="systemName" style="display: block;"></label>
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-12 col-sm-12 col-md-2 col-lg-2"><span class="c-red">*</span>体系类型：</label>
                        <div class="formControls col-xs-12 col-sm-12 col-md-8 col-lg8">
                            <input type="text" class="input-text valid" value="" placeholder="" id="systemType" name="systemType" aria-required="true" aria-invalid="false">
                            <label id="systemType-error" class="error valid" for="systemType" style="display: block;"></label>
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-12 col-sm-12 col-md-2 col-lg-2"><span class="c-red">*</span>版本：</label>
                        <div class="formControls col-xs-12 col-sm-12 col-md-8 col-lg8">
                            <input type="text" class="input-text valid" value="" placeholder="" id="version" name="version" aria-required="true" aria-invalid="false">
                            <label id="version-error" class="error valid" for="version" style="display: block;"></label>
                        </div>
                    </div>

                    <div class="row cl">
                        <label class="form-label col-xs-12 col-sm-12 col-md-2 col-lg-2"><span class="c-red">*</span>创建人：</label>
                        <div class="formControls col-xs-12 col-sm-12 col-md-8 col-lg8">
                            <input type="text" class="input-text valid" value="" placeholder="" id="creator" name="creator" aria-required="true" aria-invalid="false">
                            <label id="creator-error" class="error valid" for="creator" style="display: block;"></label>
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-12 col-sm-12 col-md-2 col-lg-2"><span class="c-red">*</span>创建时间：</label>
                        <div class="formControls col-xs-12 col-sm-12 col-md-8 col-lg8">
                            <input type="text" class="input-text valid" value="" placeholder="" id="createTime" name="createTime" aria-required="true" aria-invalid="false">
                            <label id="createTime-error" class="error valid" for="createTime" style="display: block;"></label>
                        </div>
                    </div>

                </div>
                <div class="row cl">
                    <label class="form-label col-xs-12 col-sm-12 col-md-2 col-lg-2">
                    <span class="c-red">*</span>简介：
                    </label>
                    <div class="formControls col-xs-12 col-sm-12 col-md-8 col-lg-8">
                        <textarea name="note" cols="" rows="" class="textarea valid" placeholder="说点什么...最少输入10个字符" onkeyup="$.Huitextarealength(this,100)"></textarea>
                        <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
                    </div>
                </div>
                <div class="row cl" style="padding-bottom: 20px;">
                    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
                        <input class="btn btn-primary radius btn-build" onclick="nextBtn()" value="&nbsp;&nbsp;下一步&nbsp;&nbsp;" style="float: right;">
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2"></div>
                    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
                        <input class="btn btn-primary radius btn-build-cancle" type="button" value="&nbsp;&nbsp;取消&nbsp;&nbsp;">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!--体系生成拖拽-->
    <div id="systemAdd" class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-top: 30px;display: none;">
        <div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
            <table id="normTable" class="table table-bordered"></table>
        </div>
        <!--拖拽体系生成的zTREE-->
        <div class="col-xs-12 col-sm-12 col-md-1 col-lg-1"></div>
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <ul id="systemZtree" class="ztree" style="height: 500px;"></ul>
            <button class="btn btnCreate" onclick="addSystem()">生成</button>
        </div>
    </div>
</section>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="assets/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="assets/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="assets/js/H-ui.min.js"></script>
<script type="text/javascript" src="assets/js/H-ui.admin.js"></script>
<script type="text/javascript" src="assets/zTree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="assets/zTree/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="assets/zTree/jquery.ztree.exedit.js"></script>
<script src="assets/boostrap/popper.min.js"></script>
<script src="assets/boostrap/bootstrap.min.js"></script>
<script src="assets/boostrap/bootstrap-table.min.js"></script>
<script src="assets/boostrap/bootstrap-table-zh-CN.min.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script>
    function addSystem(){
        window.location.href='systemShow.html';
    }

    $('#normTable').bootstrapTable({
        theadClasses: "thead-blue",//这里设置表头样式
        // url:'/h/SelectRequest',             //请求后台的URL（*）
        // method: 'get',                      //请求方式（*）
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sortable: true,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        queryParams: 'queryParams',         //传递参数（*）
        sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber:1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        smartDisplay:false,
        search: true,                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        strictSearch: true,
        showColumns: false,                 //是否显示所有的列
        showRefresh: false,                 //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        maxHeight: 600,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
        showToggle:false,                   //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        //得到查询的参数
          queryParams : function (params) {//这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
             var temp = {
                   rows: params.limit,                         //页面大小
                   page: (params.offset / params.limit) + 1,   //页码
                   sort: params.sort,      //排序列名
                   sortOrder: params.order //排位命令（desc，asc）
               };
                return temp;
               },
        columns: [
            {
                field: 'id',
                title: '序号',
                indexId:'id'
            }, {
                field: 'systemName',
                title: '指标名称'
            }, {
                field: 'systemType',
                title: '体系类型'
            },
            {
                field: 'version',
                title: '版本'
            },
            {
                field: 'creator',
                title: '创建人'
            },
            {
                field: 'createTime',
                title: '创建时间'
            },
            {
                field: 'note',
                title: '简介'
            }],
        data:[
            {	id: 1,
                systemName: "体系1",
                systemType : '类型一',
                version: 'v1.0',
                creator:"管理圆",
                createTime:"2020/02/1",
                note:"简介简介"
            },
            {	id: 2,
                systemName: "体系2",
                systemType : '类型二',
                version: 'v1.0',
                creator:"管理圆",
                createTime:"2020/02/1",
                note:"简介简介"
            },
            {	id: 3,
                systemName: "体系3",
                systemType : '类型二',
                version: 'v1.0',
                creator:"管理圆",
                createTime:"2020/02/1",
                note:"简介简介"
            },
            {	id: 4,
                systemName: "体系4",
                systemType : '类型二',
                version: 'v1.0',
                creator:"管理圆",
                createTime:"2020/02/1",
                note:"简介简介"
            },
            {	id: 5,
                systemName: "体系5",
                systemType : '类型二',
                version: 'v1.0',
                creator:"管理圆",
                createTime:"2020/02/1",
                note:"简介简介"
            },
            {	id: 6,
                systemName: "体系6",
                systemType : '类型二',
                version: 'v1.0',
                creator:"管理圆",
                createTime:"2020/02/1",
                note:"简介简介"
            },{	id: 7,
                systemName: "体系7",
                systemType : '类型二',
                version: 'v1.0',
                creator:"管理圆",
                createTime:"2020/02/1",
                note:"简介简介"
            },{	id: 8,
                systemName: "体系2",
                systemType : '类型二',
                version: 'v1.0',
                creator:"管理圆",
                createTime:"2020/02/1",
                note:"简介简介"
            },
            {	id: 9,
                systemName: "体系8",
                systemType : '类型二',
                version: 'v1.0',
                creator:"管理圆",
                createTime:"2020/02/1",
                note:"简介简介"
            },{	id: 10,
                systemName: "体系9",
                systemType : '类型二',
                version: 'v1.0',
                creator:"管理圆",
                createTime:"2020/02/1",
                note:"简介简介"
            },{	id: 11,
                systemName: "体系10",
                systemType : '类型二',
                version: 'v1.0',
                creator:"管理圆",
                createTime:"2020/02/1",
                note:"简介简介"
            },{	id: 12,
                systemName: "体系2",
                systemType : '类型二',
                version: 'v1.0',
                creator:"管理圆",
                createTime:"2020/02/1",
                note:"简介简介"
            },{	id: 13,
                systemName: "体系2",
                systemType : '类型二',
                version: 'v1.0',
                creator:"管理圆",
                createTime:"2020/02/1",
                note:"简介简介"
            },
        ],
    });
    function nextBtn(){
        $("#baseNews").hide();
        $("#systemAdd").show();
    }

    /**ztree 相关代码===============*/
    var MoveTest = {
        curTarget: null,
        curTmpTarget: null,
        dragTree2Dom: function(treeId, treeNodes) {
            for (var i=0,l=treeNodes.length; i<l; i++) {
                if (treeNodes[i].drag === false) {
                    return false;
                }
            }
            return true;
        },

        beforeDrop:function(treeId, treeNodes, targetNode, moveType){
            return targetNode ? targetNode.drop !== false : true;
        },
        dropTree2Dom: function(e, treeId, treeNodes) {

        },
        dom2Tree: function(e, treeId, treeNode) {
            var target = MoveTest.curTarget, tmpTarget = MoveTest.curTmpTarget;
            if (!tmpTarget) return;
            target.addClass("domBtn_Disabled");
            var zTree = $.fn.zTree.getZTreeObj("systemZtree"), parentNode;
            if (treeNode != null) {
                parentNode = treeNode;
            } else if (treeNode != null && !treeNode.isParent && "dom_" + treeNode.getParentNode().id == target.parent().attr("id")) {
                parentNode = treeNode.getParentNode();
            }
            if (tmpTarget) tmpTarget.remove();
            if (!!parentNode) {
                var nodes = zTree.addNodes(parentNode, {id:tmpTarget.attr("id"), name: tmpTarget.text()});
                zTree.selectNode(nodes[0]);
            }
            MoveTest.updateType();
            MoveTest.curTarget = null;
            MoveTest.curTmpTarget = null;
        },
        updateType: function() {
            var zTree = $.fn.zTree.getZTreeObj("systemZtree"),
                nodes = zTree.getNodes();
            for (var i=0, l=nodes.length; i<l; i++) {
                var num = nodes[i].children ? nodes[i].children.length : 0;
                nodes[i].name = nodes[i].name.replace(/ \(.*\)/gi, "") + " (" + num + ")";
                zTree.updateNode(nodes[i]);
            }
        },
        bindDom: function() {
            $(".table").bind("mousedown", MoveTest.bindMouseDown);
        },
        bindMouseDown: function(e) {
            var target = $(e.target).parent();
            if (target!=null && target.get(0).tagName=="TR") {
                var doc = $(document), target = $(target),
                    docScrollTop = doc.scrollTop(),
                    docScrollLeft = doc.scrollLeft();
                curDom = $("<div class='moveTr' id='"+$(target[0].children[0]).text()+"'>"+$(target[0].children[1]).text()+"</div>");
                curDom.appendTo("body");
                curDom.css({
                    "top": (e.clientY + docScrollTop + 3) + "px",
                    "left": (e.clientX + docScrollLeft + 3) + "px"
                });
                MoveTest.curTarget = target;
                MoveTest.curTmpTarget = curDom;
                doc.bind("mousemove", MoveTest.bindMouseMove);
                doc.bind("mouseup", MoveTest.bindMouseUp);
            }
            if(e.preventDefault) {
                e.preventDefault();
            }
        },
        bindMouseMove: function(e) {
            /*过滤后指留下ztree里的数据*/
            if($("#" + e.target.id).parent().attr("id")){
                $("ul li a#"+e.target.id).addClass("moveActive");
            }
            var doc = $(document),
                docScrollTop = doc.scrollTop(),
                docScrollLeft = doc.scrollLeft(),
                tmpTarget = MoveTest.curTmpTarget;
            if (tmpTarget) {
                tmpTarget.css({
                    "top": (e.clientY + docScrollTop + 3) + "px",
                    "left": (e.clientX + docScrollLeft + 3) + "px"
                });
            }
            return false;
        },
        bindMouseUp: function(e) {
            var moveArr = $(".moveActive");
            $.each(moveArr,function(k,v){
                $(v).removeClass("moveActive");
            });
            var doc = $(document);
            doc.unbind("mousemove", MoveTest.bindMouseMove);
            doc.unbind("mouseup", MoveTest.bindMouseUp);
            doc.unbind("selectstart", MoveTest.docSelect);

            var target = MoveTest.curTarget, tmpTarget = MoveTest.curTmpTarget;
            if (tmpTarget) tmpTarget.remove();
            MoveTest.curTarget = null;
            MoveTest.curTmpTarget = null;

        },
        bindSelect: function() {
            return false;
        }
    };
    var setting = {
        edit: {
            enable: true,
            showRemoveBtn: false,
            showRenameBtn: false,
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeDrag: MoveTest.dragTree2Dom,
            beforeDrop: MoveTest.beforeDrop,
            onDrop: MoveTest.dropTree2Dom,
            //onDragMove: MoveTest.dragMove,
            onMouseUp: MoveTest.dom2Tree
        }
    };

    var treeNodes =[
        { id:1, pId:0, name:"根结点占位", open:true},
        { id:11, pId:1, name:"叶子节点 1-1"},
        // { id:12, pId:1, name:"叶子节点 1-2"},
        // { id:13, pId:1, name:"叶子节点 1-3"},
        // { id:2, pId:0, name:"父节点 2", open:true},
        // { id:21, pId:2, name:"叶子节点 2-1"},
        // { id:22, pId:2, name:"叶子节点 2-2"},
        // { id:23, pId:2, name:"叶子节点 2-3"},
        // { id:3, pId:0, name:"父节点 3", open:true},
        // { id:31, pId:3, name:"叶子节点 3-1"},
        // { id:32, pId:3, name:"叶子节点 3-2"},
        // { id:33, pId:3, name:"叶子节点 3-3"}
    ];

    function beforeDrag(treeId, treeNodes) {
        for (var i=0,l=treeNodes.length; i<l; i++) {
            if (treeNodes[i].drag === false) {
                return false;
            }
        }
        return true;
    }
    function beforeDrop(treeId, treeNodes, targetNode, moveType) {
        return targetNode ? targetNode.drop !== false : true;
    }

    $(document).ready(function(){
        // $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        $.fn.zTree.init($("#systemZtree"), setting,treeNodes);
        MoveTest.updateType();
        MoveTest.bindDom();

    });



</script>
</body>
</html>